<template>
  <div>
      <div class="head">税前工资计算器</div>
      <input id="gz" v-model="gz" type="text" placeholder="请输入税前工资">
      <input id="bx" v-model="bx" type="text" placeholder="请输入各项社会保险金">
      <div id="census" class="sel">
          <div @click="ceshow()">{{this.currSei === null ? '起征点' : this.type[this.currSei]}}<div class="icon"></div></div>
          <div v-show="census.show" :style="{opacity: census.opacity, top: census.top}">
                <div class="sx" v-for="(a, i) in type" @click="csure(i)">{{a}}</div>
            </div>
      </div>
      <div class="calc" @click="calc()">计算</div>
      <div id="result" v-show="result">
          <div>计算结果</div>
          <div class="ritem" v-if="result" v-for="e in result">
              <div>{{e.name}}</div><div>{{e.val}}</div>
          </div>
          <div class="share">分享给好友</div>
      </div>
      <div id="formula">
          <div>个人所得税计算公式</div>
          <div>
              应纳税所得额 = 工资收入金额 － 各项社会保险费 － 起征点(3500元)<br>
              应纳税额 = 应纳税所得额 x 税率 － 速算扣除数<br>
              说明：如果计算的是外籍人士（包括港、澳、台），则个税起征点应设为4800元。
          </div>
      </div>
      <div id="table">
          <div>个人所得税税率表</div>
          <div class="indent">
              小编辛苦精心为各位网友准备了2017年最新个人所得税税率表，个税税率表，3500元起征点，包括工资税率表、年终奖税率表、劳务税率表，个体户税率表 等等，简单实用的表格，让您更容易看懂税率表。
          </div>
          <div>一、工资、薪金所得</div>
          <div class="indent">工资、薪金所得，适用七级超额累进税率，税率为百分之三（3%）至百分之四十五（45%）。</div>
          <table>
              <tbody>
                  <tr>
                      <th>级数</th>
                      <th>应纳税所得额(含税)</th>
                      <th>应纳税所得额(不含税)</th>
                      <th>税率（%）</th>
                      <th>速算扣除数</th>
                  </tr>
                  <tr>
                      <td>1</td>
                      <td>不超过1,500元的</td>
                      <td>不超过1,455元的</td>
                      <td>3</td>
                      <td>0</td>
                  </tr>
                  <tr>
                      <td>2</td>
                      <td>超过1,500元到4,500元的部分</td>
                      <td>超过1,455元至4,155元的部分</td>
                      <td>10</td>
                      <td>105</td>
                  </tr>
                  <tr>
                      <td>3</td>
                      <td>超过4,500元至9,000元的部分</td>
                      <td>超过4,155元至7,755元的部分</td>
                      <td>20</td>
                      <td>555</td>
                  </tr>
                  <tr>
                      <td>4</td>
                      <td>超过9,000元至35,000元的部分</td>
                      <td>超过7,755至27,255元的部分</td>
                      <td>25</td>
                      <td>1005</td>
                  </tr>
                  <tr>
                      <td>5</td>
                      <td>超过35,000元的部分</td>
                      <td>超过55,000元的部分</td>
                      <td>30</td>
                      <td>2,755</td>
                  </tr>
                  <tr>
                      <td>6</td>
                      <td>超过55,000元至80,000元的部分</td>
                      <td>超过41,255元至57,505元的部分</td>
                      <td>35</td>
                      <td>5,505</td>
                  </tr>
                  <tr>
                      <td>7</td>
                      <td>超过80,000元的部分</td>
                      <td>超过57,505的部分</td>
                      <td>45</td>
                      <td>13,505</td>
                  </tr>
              </tbody>
          </table>
          <div>说明</div>
          <div class="indent">1、本表含税级距中应纳税所得额，是指每月收入金额 - 各项社会保险金(五险一金) - 起征点3500元(外籍4800元)的余额。</div>
          <div class="indent">2、含税级距适用于由纳税人负担税款的工资、薪金所得；不含税级距适用于由他人(单位)代付税款的工资、薪金所得。</div>
      </div>
      <div id="case">
          <div>案例说明</div>
          <div class="indent">1、张三在2017年一月份税前工资10000元，他需要缴纳各项社会保险金1100元，那么他的税后工资是多少呢？</div>
          <div class="indent">应纳税所得额==(应发工资－四金)－3500 =10000 － 1100 － 3500 = 5400元，参照上面的工资税率表不含税部分，超过4,155元至7,755元的部分，则适用税率20%，速算扣除数为555。</div>
          <div class="indent">缴费 = 应纳税所得额*税率 － 速算扣除数 = 5400*20% －555= 525元。</div>
          <div class="indent">实发工资=应发工资－四金－缴税 = 10000 －1100－525 = 8375元</div>
      </div>
      <div id="counter">
        <div>个税计算器</div>
        <router-link to="/jsq/" tag="div">更多>></router-link>
        <div class="c_box">
          <div class="citem" v-for="(count, i) in counters" :key="count.text[0]" v-if="i < 4">
            <router-link :to="count.url" tag="div">{{count.text[0]}}<br v-if="count.text[1] != ''">{{count.text[1]}}</router-link>
          </div>
        </div>
        <div class="c_box">
          <div class="citem" v-for="(count, i) in counters" :key="count.text[0]" v-if="i >= 4">
            <router-link :to="count.url" tag="div">{{count.text[0]}}<br v-if="count.text[1] != ''">{{count.text[1]}}</router-link>
          </div>
        </div>
      </div>
      <div id="news">
          <div>最新资讯</div>
          <div v-if="msgs">
            <Sitem v-for="msg in msgs" :msg="msg" :key="msg.img"/>
            <more url="/news/"/>
          </div>
      </div>
      <div class="ad"></div>
  </div>
</template>
<script>
import Sitem from "../public/Sitem";
import more from "../public/More";
import { Toast } from "mint-ui";
import { Get, Post, Port } from "../../../server/ajax"
export default {
  data() {
    return {
      gz: null,
      bx: null,
      qzd: 3500,
      result: null,
      counters: [
        {
          url: "/jsq/sqgz.html",
          text: ["税前工", "资计算器"]
        },
        {
          url: "/jsq/shgz.html",
          text: ["税后工", "资计算器"]
        },
        {
          url: "/guangzhoushi_shebao/",
          text: ["社保", "公积金"]
        },
        {
          url: "/jsq/nzj.html",
          text: ["年终奖", ""]
        },
        {
          url: "/jsq/lwbc.html",
          text: ["劳务报", "酬所得"]
        },
        {
          url: "/jsq/cczl.html",
          text: ["财产租赁", "所得税"]
        },
        {
          url: "/jsq/cczr.html",
          text: ["财产转让", "所得税"]
        },
        {
          url: "/jsq/orsd.html",
          text: ["偶然", "所得税"]
        }
      ],
      msgs: null,
      census: {
        show: false,
        opacity: 0,
        top:
          1.5 *
            parseFloat(
              window.getComputedStyle(document.documentElement)["fontSize"]
            ) +
          "px"
      },
      type: ["3500", "4800"],
      currSei: 0
    };
  },
  components: {
    Sitem,
    more
  },
  methods: {
    calc() {
      if (!this.gz || isNaN(this.gz)) {
        Toast("无效的收入金额");
        return;
      }
      if (!this.bx || isNaN(this.bx) || this.bx < 0) {
        Toast("无效的各项社会保险费金额");
        return;
      }
      if (this.gz < parseInt(this.bx) + parseInt(this.qzd)) {
        Toast("您无需缴纳个人所得税。");
        return;
      }
      var R, Q;
      var A = this.gz - this.bx - this.qzd;
      A = A.toFixed(2);
      if (A <= 1500) {
        R = 0.03;
        Q = 0;
      } else if (A > 1500 && A <= 4500) {
        R = 0.1;
        Q = 105;
      } else if (A > 4500 && A <= 9000) {
        R = 0.2;
        Q = 555;
      } else if (A > 9000 && A <= 35000) {
        R = 0.25;
        Q = 1005;
      } else if (A > 35000 && A <= 55000) {
        R = 0.3;
        Q = 2755;
      } else if (A > 55000 && A <= 80000) {
        R = 0.35;
        Q = 5505;
      } else {
        R = 0.45;
        Q = 13505;
      }
      var tax = A * R - Q;
      var realIncome = this.gz - this.bx - tax;
      this.result = [
        {
          name: "应纳税所得额",
          val: (this.gz - this.qzd).toFixed(2) + " 元"
        },
        {
          name: "适用税率",
          val: R * 100 + "%"
        },
        {
          name: "速算扣除数",
          val: Q + " 元"
        },
        {
          name: "应缴税款",
          val: tax.toFixed(2) + " 元"
        },
        {
          name: "实发工资",
          val: realIncome.toFixed(2) + " 元"
        }
      ];
    },
    ceshow() {
      if (!this.census.show) {
        this.census.show = true;
        setTimeout(
          function() {
            this.census.opacity = 1;
            this.census.top =
              1.2 *
                parseFloat(
                  window.getComputedStyle(document.documentElement)["fontSize"]
                ) +
              "px";
          }.bind(this),
          10
        );
      } else {
        this.census = {
          show: false,
          opacity: 0,
          top:
            1.5 *
              parseFloat(
                window.getComputedStyle(document.documentElement)["fontSize"]
              ) +
            "px"
        };
      }
    },
    csure(a) {
      this.ceshow();
      this.currSei = a;
      this.qzd = this.type[a];
    }
  },
  mounted() {
    Post(`${Port}/mobile/cms/news`, {
      page_size: 3
    }, function(data){
      this.msgs = data
    }.bind(this))
  },
  activated() {
    setTimeout(function(){
      this.$parent.updata();
    }.bind(this), 10)
  }
};
</script>
<style scoped>
.head {
  font-size: 0.36rem;
  color: #333;
  text-align: center;
  font-weight: bold;
  margin-top: 1.75rem;
}
input {
  display: block;
  width: 6.9rem;
  margin: 0.38rem auto 0;
  height: 1.1rem;
  border: 0.01rem solid #ccc;
  font-size: 0.32rem;
  line-height: 1.1rem;
  text-indent: 0.4rem;
  color: #333;
  border-radius: 0.1rem;
}
#base {
  margin-top: 0.85rem;
}
.calc {
  height: 1rem;
  width: 6.9rem;
  margin: 0.8rem auto 0;
  text-align: center;
  color: #fff;
  font-size: 0.39rem;
  line-height: 1rem;
  background-color: #ed5172;
  letter-spacing: 0.04rem;
  clear: both;
  border-radius: 0.1rem;
}
#result {
  padding: 0.9rem 0.3rem 1.27rem;
}
#result > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 0.4rem;
}
.ritem {
  font-size: 0.32rem;
  margin-top: 0.2rem;
}
.ritem > div {
  display: inline-block;
  width: 2.5rem;
}
.ritem > div:nth-child(1) {
  color: #666;
}
.ritem > div:nth-child(2) {
  color: #ed5172;
}
.share {
  width: 2.1rem;
  height: 0.64rem;
  border-radius: 0.32rem;
  border: 0.01rem solid #999;
  text-align: center;
  color: #999;
  font-size: 0.28rem;
  line-height: 0.64rem;
  margin: 1.3rem auto 0;
}
#formula {
  background-color: #f4f5f7;
  padding: 1.4rem 0.3rem 0;
  letter-spacing: 0.02rem;
}
#formula > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
}
#formula > div:nth-child(2) {
  font-size: 0.28rem;
  color: #666;
  margin-top: 0.4rem;
}
#table {
  background-color: #f4f5f7;
  padding: 1.1rem 0.3rem 0;
  font-size: 0.28rem;
  color: #666;
  letter-spacing: 0.02rem;
}
#table > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 0.4rem;
}
#table > div {
  margin-top: 0.3rem;
}
.indent {
  font-size: 0.28rem;
  color: #666;
  margin-top: 0.4rem;
  text-indent: 0.6rem;
}
table {
  border-collapse: collapse;
  font-size: 0.16rem;
  margin-top: 0.4rem;
}
tbody {
  display: table-row-group;
}
tr {
  display: table-row;
}
td,
th {
  border: 0.01rem solid #a7aeb1;
  padding: 0.1rem;
}
#case {
  background-color: #f4f5f7;
  padding: 1.4rem 0.3rem 1.5rem;
  letter-spacing: 0.02rem;
}
#case > div:nth-child(1) {
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
}
#case > div:nth-child(2) {
  font-size: 0.28rem;
  color: #666;
  margin-top: 0.4rem;
  word-break: break-all;
}
#counter > div:nth-child(1) {
  margin: 1.45rem 0.3rem 0;
  font-size: 0.32rem;
  color: #333;
  font-weight: bold;
}
#counter > div:nth-child(2) {
  margin: 0rem 0.3rem 0.3rem;
  font-size: 0.28rem;
  color: #999;
  text-align: right;
}
.c_box {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.3rem;
  color: #fff;
  justify-content: space-around;
  margin-bottom: 0.28rem;
}
.citem {
  display: table;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #ed5172;
  border: 0.01rem #ed3e63;
  text-align: center;
}
.citem > div {
  display: table-cell;
  vertical-align: middle;
}
#news {
  padding-top: 1.4rem;
}
#news > div:nth-child(1) {
  font-size: 0.32rem;
  padding: 0 0.3rem 0.6rem;
  color: #333;
  font-weight: bold;
  border-bottom: 0.01rem solid #e2e2e2;
}
#news > div:nth-child(2) {
  padding: 0 0.3rem 0;
}
.ad {
  width: 6.93rem;
  height: 4.62rem;
  background-image: url("~@/assets/counter/ad.png");
  background-size: cover;
  margin: 0.25rem auto 1.94rem;
}
#census {
  width: 6.9rem;
  margin: 0.38rem auto 0;
}
.sel {
  position: relative;
  width: 3.3rem;
  height: 1.1rem;
  border: 0.01rem solid #ccc;
  font-size: 0.32rem;
  line-height: 1.1rem;
  text-indent: 0.4rem;
  color: #333;
  border-radius: 0.1rem;
}
.icon {
  position: absolute;
  top: 0.45rem;
  right: 0.4rem;
  width: 0.33rem;
  height: 0.19rem;
  background-image: url("~@/assets/scounter/sicon.png");
  background-size: cover;
}
.sel > div:nth-child(2) {
  position: absolute;
  z-index: 1;
  top: 1.2rem;
  width: 100%;
  max-height: 3rem;
  overflow: auto;
  border: 0.01rem solid #ccc;
  border-radius: 0.1rem;
  transition: all 0.3s;
  background-color: #fff;
}
.sx {
  border-bottom: 0.01rem solid #e2e2e2;
}
</style>
